<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px] mt-[16px]" :model="queryParams" :inline="true">
				<el-form-item label="订单号">
					<el-input class="w-[280px]" v-model="queryParams.sn" placeholder="订单号" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="商户单号">
					<el-input class="w-[280px]" v-model="queryParams.pay_sn" placeholder="商户单号" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="订单备注">
					<el-input class="w-[280px]" v-model="queryParams.remark" placeholder="订单备注" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="项目名称">
					<el-input class="w-[280px]" v-model="queryParams.business_name" placeholder="项目名称" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="客户电话">
					<el-input class="w-[280px]" v-model="queryParams.mobile" placeholder="客户电话" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="法人名称">
					<el-input class="w-[280px]" v-model="queryParams.full_name" placeholder="法人名称" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="认证公司">
					<el-input class="w-[280px]" v-model="queryParams.enterpris_name" placeholder="认证公司名称" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
<!-- 				<el-form-item label="支付方式">
					<el-select class="w-[280px]" v-model="queryParams.pay_way">
						<el-option label="全部" value />
						<el-option label="微信支付" :value="2" />
					</el-select>
				</el-form-item> -->
<!-- 				<el-form-item label="支付状态">
					<el-select class="w-[280px]" v-model="queryParams.pay_status">
						<el-option label="全部" value />
						<el-option label="未支付" :value="0" />
						<el-option label="已支付" :value="1" />
					</el-select>
				</el-form-item> -->
<!-- 				<el-form-item label="服务状态">
					<el-select class="w-[280px]" v-model="queryParams.server_status">
						<el-option label="全部" value />
						<el-option label="未服务" :value="0" />
						<el-option label="服务中" :value="1" />
						<el-option label="已完成" :value="2" />
					</el-select>
				</el-form-item> -->
				<el-form-item label="下单时间">
					<daterange-picker v-model:startTime="queryParams.start_time"
						v-model:endTime="queryParams.end_time" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
<!-- 					<export-data class="ml-2.5" :fetch-fun="rechargeLists" :params="queryParams"
						:page-size="pager.size" /> -->
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<el-tabs v-model="tabsActive" @tab-change="getLists">
			    <el-tab-pane
			        v-for="(item, index) in tabsMap"
			        :key="index"
			        :label="item.name"
			        :name="item.type"
			        lazy
			    ></el-tab-pane>
			</el-tabs>
			<el-table size="large" border fit height="650" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="订单编号" prop="sn" min-width="220" align="center" />
				<el-table-column label="下单时间" prop="create_time" min-width="220" align="center" />
				<el-table-column label="商户单号" prop="pay_sn" min-width="260" align="center" />
				<el-table-column label="业务名称" prop="business_name" min-width="220" align="center" />
				<el-table-column label="企业名称" prop="enterprise_name" min-width="220" align="center" />
				<el-table-column label="手机号" prop="mobile" min-width="150" align="center" />
				<el-table-column label="姓名" prop="full_name" min-width="150" align="center" />
				<el-table-column label="身份证号" prop="id_card" min-width="220" align="center" />
				<el-table-column label="营业额" prop="turnover" min-width="150" align="center" />
				<el-table-column label="备注" prop="remark" min-width="150" align="center" />
				<el-table-column label="支付金额" prop="order_amount" min-width="100" align="center" />
				<el-table-column label="支付状态" prop="" min-width="100" align="center">
					<template #default="{ row }">
						<span :class="{
                                'text-error': row.pay_status == 0
                            }">
							{{ row.pay_status_text }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="退款状态" prop="" min-width="100" align="center">
					<template #default="{ row }">
						<el-button v-if="row.pay_status == 1 && row.refund_status==0"
							v-perms="['recharge.recharge/refund']" type="primary" link
							@click="handleShowRefund(row)">
							退款
						</el-button>
						<span v-else :class="{
				                'text-error': row.refund_status == 1
				            }">
							{{ row.refund_status_text }}
						</span>
					</template>
				</el-table-column>
				
				<el-table-column label="服务状态" prop="" min-width="100">
					<template #default="{ row }">
						  <el-tag v-if="row.server_status==0" type="info">未服务</el-tag>
						  <el-tag v-if="row.server_status==1" type="primary">服务中</el-tag>
						  <el-tag v-if="row.server_status==2" type="success">服务完成</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="下单时间" prop="create_time" min-width="180" align="center" />
				<el-table-column label="操作" width="120" fixed="right" align="center">
					<template #default="{ row }">
						<el-button v-if="row.pay_status == 1 && row.refund_status==0"
							v-perms="['recharge.recharge/refund']" type="primary" link
							@click="handleShowRefund(row)">
							退款
						</el-button>
						<el-button v-perms="['recharge.recharge/remark']" type="primary" link
							@click="handleShowRemark(row)">
							备注
						</el-button>
						<el-button v-perms="['order.voucher']" type="info" link @click="handleShowServer(row)">凭证</el-button>
						<el-button v-perms="['order.start_server']" v-if="row.server_status==0" type="primary" link @click="updateServerStatus(row)">进行服务</el-button>
						<el-button v-perms="['order.end_server']" v-if="row.server_status==1" type="success" link @click="updateServerStatus(row)">服务完成</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
	<div>
		<Refund v-if="showRefund" ref="editRef" @success="getLists" @close="showRefund = false" />
		<voucher v-if="showVoucher" ref="voucherRef" @success="getLists" @close="showVoucher = false" />
		<remark v-if="showRemark" ref="remarkRef" @success="getLists" @close="showRemark = false" />
		<!-- <Refund v-model="showRefund" :refund-id="selectRefundId" :pay-price="payPrice" /> -->
	</div>
</template>
<script lang="ts" setup name="articleLists">
	import { rechargeLists, refund } from '@/api/finance'
	import {ApiUpdateServerStatus} from '@/api/app/recharge'
	import { usePaging } from '@/hooks/usePaging'
	import feedback from '@/utils/feedback'
	import Refund from './component/refund.vue'
	import voucher from './component/server_voucher.vue'
	import remark from './component/remark.vue'
	
	enum NoticeEnums {
	    USER = 0,
	    PLATFORM = 2
	}
	const tabsActive = ref(NoticeEnums.USER)
	const tabsMap = [
	    {
	        name: '全部',
	        type: 0
	    },
	    {
	        name: '待支付',
	        type: -1
	    },
		{
		    name: '已支付',
		    type: 1
		},
		{
		    name: '待服务',
		    type: 2
		},
		{
		    name: '办理中',
		    type: 3
		},
		{
		    name: '已完成',
		    type: 4
		},
	]

	const showRefund = ref(false)
	const showVoucher = ref(false)
	const showRemark = ref(false)
	const editRef = shallowRef<InstanceType<typeof Refund>>()
	const voucherRef = shallowRef<InstanceType<typeof voucher>>()
	const remarkRef = shallowRef<InstanceType<typeof remark>>()
	const queryParams = reactive({
		sn: '',
		user_info: '',
		pay_way: '',
		pay_status: '',
		start_time: '',
		end_time: '',
		server_status:'',
		pay_sn:'',
		remark:'',
		business_name:'',
		mobile:'',
		full_name:'',
		enterpris_name:'',
		type:tabsActive
	})



	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: rechargeLists,
		params: queryParams
	})

	const handleShowRefund = async (row:any) => {
		
		showRefund.value = true
		await nextTick()
		editRef.value?.open('edit')
		console.log(row)
		editRef.value?.setFormData(row)
	}
	
	
	const handleShowServer = async (row:any) => {
		showVoucher.value = true
		await nextTick()
		voucherRef.value?.open('edit')
		console.log(row)
		voucherRef.value?.setFormData(row)
	}
	
	const handleShowRemark = async (row:any) => {
		showRemark.value = true
		await nextTick()
		remarkRef.value?.open('edit')
		console.log(row)
		remarkRef.value?.setFormData(row)
	}
	
	const updateServerStatus = async (row:any) => {
		if(row.server_status==0){
			await feedback.confirm('确认进行服务？')
		}
		if(row.server_status==1){
			await feedback.confirm('确认服务完成？')
		}
		console.log(row)
		await ApiUpdateServerStatus({
			id:row.id
		})
		
		getLists()
		
	}
	
	

	const handleRefund = async (id : number, refund_price : any, id_all_refund : boolean) => {
		await feedback.confirm('确认退款？')
		await refund({
			recharge_id: id,
			refund_price: refund_price,
			id_all_refund: id_all_refund
		})
		getLists()
	}

	getLists()
</script>